Форум

kaspers · #1 (**permalink**) 25.01.2016, 12:48

Добрый день.
есть html код

<a href="#" id="getContent">Загрузить контент</a>
<div id="grid"><div class="block1"></div></div>

скрипт

$(document).ready(function(){
$('#getContent').click(function(){
	var old = $('#grid').html();
	var h = $('#grid').height();
	h = h + 330;
	$('#grid').height(h);
$.ajax({
url: "/content.php",
cache: false,
beforeSend: function() {
$('#grid').html('Получаем контент');
},
success: function(html){
$("#grid").html(old + html);
}
});

return false;
});

});

Необходимо при нажатии на ссылку подгружать доп.код из файлов в блок #grid. Сейчас скрипт работает, но необходимо сделать так, чтобы при первом нажатии загружался файл content.php, при втором content2.php и т.д.
А еще есть проблема в том.. Скрипт писался для того чтобы уменьшить время загрузки страницы, но как я понял, сейчас при нажатии на ссылку весь код из #grid будет загружаться снова и снова. Как это исправить?

laimas · #2 (**permalink**) 25.01.2016, 13:06

Этого $('#grid').html('Получаем контент'); не делать, показывая это сообщение в отдельной панели, а после приема данных
$("#grid").append(html);

Скрипт на сервере должен быть один - content.php, который обрабатывает параметр запроса, номер страниц/блока, а не куча content1.php, content2.php, ... У вас что каждый такой файл по содержанию есть статическая страница с конструкцией echo и все что-ли?

kaspers · #3 (**permalink**) 25.01.2016, 14:11

$(document).ready(function(){
$('#getContent').click(function(){
	var old = $('#grid').html();
	var h = $('#grid').height();
	h = h + 330;
	$('#grid').height(h);
$.ajax({
url: "/content.php",
cache: false,
success: function(html){
$("#grid").append(old + html);
}
});

return false;
});

});

Так?
На самом деле в php файлах статический код, я переделал их в html, а тут забыл поменять)

laimas · #4 (**permalink**) 25.01.2016, 15:00

~~var old = $('#grid').html();~~

$("#grid").append(old + html); заменить на $("#grid").append(html);

иначе вы постоянно перезаписываете все содержимое $("#grid"), а нужно лишь добавлять к имеющемуся возвращенное сервером.

Сообщение о загрузке оформите блоком с абсолютным позиционированием, показывая его перед началом запроса и скрывая после него.

Статического кода нет, есть статичное содержимое, которое можно хранить в файлах, но зачем же плодить запросы по разным url. Пусть есть статичные файлы, передавайте серверному скрипту content.php параметр определяющий файл. Если именовать файлы по порядку, от 1 до N, то запрос:

$.ajax({
type: "GET",
url: "/content.php",
data: {page=номер файла},
....

где "номер файла" - номер определяющий запрашиваемый файл, который можно хранить в переменной как счетчик увеличивающийся при каждом запросе.

Сервер получая параметр page, проверяет по пути наличие файла и если есть таковой, то подключает его:

if(file_exists('path/' . $_GET['page'] . '.html')) include 'path/' . $_GET['page'] . '.html';

Если файла не существует, к примеру достигнут конец, то сервер ничего не вернет, и на клиенте можно так:

if(!!html) $("#grid").append(html);

kaspers · #5 (**permalink**) 25.01.2016, 17:35

Заменил на $("#grid").append(html), при клике уже имеющийся html код пропадает..
И я не до конца понял про то как менять номер файла.. Хранить нужные подгружаемые элементы в разных html файлах, но выбирать какой именно загружать сейчас в content.php?

kaspers · #6 (**permalink**) 25.01.2016, 17:37

Извините, с append разобрался.. Больше интересует то, как при повторном нажатии подгружать другой файл

laimas · #7 (**permalink**) 25.01.2016, 17:57

Основной файл, с учетом того, что первая страница (файл) сразу выводится, поэтому счетчик начинается со второй страницы.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    var page = 2;
    $('button').click(function() {
        $.ajax({
            url : 'files.php?page='+page,
            type : 'GET',
            success: function(d){
                if(!!d) {
                    $('#content').append(d);
                    page++    
                }
            }
        })
    })
});
</script>     
</head> 
<body>
<div id="content"><p>Содержание 1</p></div>
<button>Следующая</button>
</body> 
</html>

files.php

<?php
$path = 'docs/';
$file = $path . $_GET['page'] . '.html';
if(file_exists($file)) include $file;
?>

Подключаемые файлы в каталоге docs
1.html

<p>Содержание 2</p>

2.html

<p>Содержание 3</p>

и т.д. для примера.

Скопируйте на локальный сервер и запустите.

kaspers · #8 (**permalink**) 25.01.2016, 18:28

Спасибо вам большое)

Форум

Справочник

Discord чат

Курсы javascript